<template>
  <div id="actionList">
    <el-card class="box-card" v-for="(action,$index) in actions" shadow="hover">
      <div slot="header" class="clearfix">
        <span>交互{{$index+1}}</span>

        <div style="float: right; padding: 3px 0">
          <el-button style="padding: 3px 0;margin: 0 5px" type="text" @click="editAction(action)" size="mini">编辑
          </el-button>
          <el-button style="padding: 3px 0;margin: 0 5px" type="text" @click="delAction(action)" size="mini">删除
          </el-button>
        </div>

      </div>
      <action-info :action="action"/>
    </el-card>
    <el-button icon="el-icon-plus" @click="addAction" style="width: 100%">新增交互</el-button>
    <action-edit :action="action" v-if="editVisible" @close="editVisible=false" @success="handleSuccess"/>
  </div>
</template>
<script>
  import ActionEdit from '../../../action/index.vue';
  import vpd from '../../mixins/vpd';
  import ActionInfo from '../../../action/info.vue';

  export default {
    mixins: [vpd],
    components: {
      ActionEdit,
      ActionInfo
    },
    data() {
      return {
        editVisible: false,
        activeName: '',
        action: {},
      }
    },
    computed: {
      activeElement() {
        return this.$vpd.state.activeElement;
      },
      actions() {
        return this.activeElement.actions || [];
      }
    },
    methods: {
      addAction() {
        this.editVisible = true;
        this.action = {};
      },
      editAction(action) {
        this.editVisible = true;
        this.action = action;
      },
      handleSuccess(action) {
        this.$vpd.commit('saveAction', {
          uuid: this.activeElement.uuid,
          action: action
        });
        this.editVisible = false;
      },
      delAction(action) {
        this.$confirm('确定删除该交互吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$vpd.commit('delAction', {
            uuid: this.activeElement.uuid,
            action: action
          });
        })

      }
    }
  }
</script>
<style scoped lang="scss">
  #actionList {
    .el-card {
      margin-bottom: 10px;
    }
  }
</style>
